const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const {CleanWebpackPlugin} = require ('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
/**@type {import('webpack').Configuration} */
module.exports = {
    // 配置mode
    mode:'development',
    //入口文件输出配置
    entry:   './src/main.js',
    
    //出口文件配置
    output: {
        path: path.join(__dirname, 'dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'js/bundle.[contenthash:8].js' //输出文件
    },

    //loader 加载 module.loaders 告知 webpack每一种文件都需要使用什么加载器来处理：
    module : {
        rules: [  
            //.css文件加载器
            { 
               test: /\.css$/, 
               use: [
                   'style-loader',
                    'css-loader'
                ]  //.css 文件使用 style-loader 和 css-loader 来处理.
            },

            //.less 文件加载器
        { 
            test: /\.less$/, 
            use: [
                'style-loader',
                'css-loader',
                'less-loader'
            ] //.less 文件使用 style-loader、css-loader 和 less-loader 来编译处理
        },

        // 图片文件加载器
        {
            test: /\.(png|jpg|gif|svg)$/,
            use: {
                loader:'url-loader',
                options:{
                    name:'img/[name].[contenthash:6].[ext]',
                    esModule:false
                }
            },
        },

        // vue-loader
        {
            test:/\.vue$/,
            use:'vue-loader'
        }

        ]
    },

    //加载plugins
    plugins: [
        // 自动清除输出目录插件
        new CleanWebpackPlugin(),
       
        new VueLoaderPlugin(),

        //用于生产符合要求的html文件;
        new HtmlWebpackPlugin({
            template:'./public/index.html',
            title:"vue-webpack-demo"
         }),

        new webpack.DefinePlugin({
            BASE_URL:'/'
        }),
    ],
    resolve: {
        // 以下配置会将没指定拓展名的文件按如下类型查找匹配
        extensions: [
            //... 
            '.js', '.json','.vue'
        ] 
      }
}